<!-- 多图片上传控件 -->
<template>
  <a-upload
    action="/"
    @success="success"
    @error="error"
    @change="onChange"
    :auto-upload="false"
    :tip="tip"
    :disabled="disabled"
    image-preview
    list-type="picture-card"
    multiple
    :default-file-list="fileList"
    ref="uploadRef"
    :file-list="fileList"
  >
    <template #image="{ fileItem }">
      <div>
        <img :src="fileItem.url" :alt="fileItem.name" />
      </div>
    </template>
    <template #upload-button>
      <div class="arco-upload-picture-card">
        <div class="arco-upload-picture-card-text">
          <IconPlus />
          <div style="margin-top: 10px; font-weight: 600">点击上传图片</div>
        </div>
      </div>
    </template>
  </a-upload>
</template>

<script lang="ts" setup>
import { PostFile } from '@/apis/management/base';
import { Message } from '@arco-design/web-vue';

const props = withDefaults(
  defineProps<{
    props: { [propName: string]: any };
    name?: string;
    required?: boolean;
    oneValue: any;
    disabled?: boolean;
    regex?: {
      [name: string]: {
        role: any;
        name: any;
      };
    };
  }>(),
  {}
);
const emit = defineEmits(['update:oneValue']);
const modelValue = computed({
  get: () => {
    return props.oneValue;
  },
  set: (val) => {
    emit('update:oneValue', val);
  }
});

//复制一份props
const getProps = computed(() => {
  return props.props;
});

const tip = `可以上传多张图片`;

let fileList = ref<any>([]);

let tempData: any = []; // 储存临时文件

onMounted(() => {
  if (
    modelValue.value !== undefined &&
    modelValue.value[0] !== '' &&
    modelValue.value
  ) {
    fileList.value = JSON.parse(modelValue.value);
  }
});

// 文件上传
const onChange = async (currFileList: any, currentFile: any) => {
  fileList.value = currFileList;
  let temp = new FormData();
  temp.append('data', currentFile.file);
  // console.log(temp);
  const url = await PostFile(temp);

  tempData.push({
    url,
    uid: currentFile.uid,
    name: currentFile.name
  });
  modelValue.value = [];
  currFileList.forEach((item1: any, index1: number) => {
    tempData.forEach((item2: any, index2: number) => {
      if (item1.uid === item2.uid) {
        modelValue.value.push({
          url: item2.url,
          uid: item2.uid,
          name: item2.name
        });
      }
    });
  });

  modelValue.value = JSON.stringify(modelValue.value);
  // tempData.push({
  //   url,
  //   uid: currentFile.uid,
  //   name: currentFile.name
  // });

  // currFileList.forEach((item: any) => {
  //   modelValue.value.push({
  //     url,
  //   })
  // })

  // modelValue.value = JSON.stringify({
  //   url,
  //   uid: fileList.value.uid,
  //   name: fileList.value.name
  // });
  // let index = url.lastIndexOf('\/');
  // modelValue.value = url.substring(index + 1, url.length);
};
const remove = (fileItem: any) => {
  console.log(fileItem);
};

// 成功时候调用
const success = (fileItem: any) => {
  Message.success('上传文件成功！');
};

// 失败的时候调用
const error = (fileItem: any) => {
  Message.error('上传文件失败，请重新上传！ ');
};
</script>

<style scoped lang="less"></style>
